import React from 'react'

export default class Count extends React.Component {
  constructor() {
    super()

    this.state = {
      //状态对象里面的属性就可以随便写
      count: 1,
      msg: 'hello',
    }
  }
  render() {
    console.log('render调用了')
    // 在render函数中this也是当前组件实例
    return (
      <div>
        <p id="c">{this.state.count}</p>
        <p>{this.state.msg}</p>
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1, // 改成2进入队列
              // msg: '123',
            })
            // this.setState({
            //   count: this.state.count + 2, // 改成3进入队列
            // })
            // this.setState({
            //   count: this.state.count + 3, //改成4进入队列
            // })
            // 合并完之后:
            // this.setState({
            //   // count: this.state.count + 1, // 改成2进入队列
            //   msg: '123',
            //   // count: this.state.count + 2, // 改成3进入队列
            //   count: this.state.count + 3, //改成4进入队列
            // })

            // setState第一个参数的另一种写法
            // this.setState((state) => {
            //   // 这个回调函数可以接收到修改完的最新的state
            //   console.log(state)
            //   // 回调函数的执行时机: 当上一次state修改完毕之后
            //   return {
            //     count: state.count + 2,
            //   }
            // })

            // setState的第二个参数
            // 不管第一个参数是对象还是函数,第二个参数永远是函数
            this.setState(
              (state) => {
                // 第一个函数的执行时机: 当state数据修改完毕,页面还没有更新
                console.log(state)
                console.log(document.getElementById('c').innerText)
              },
              () => {
                //第二个函数的执行时机: 当state数据修改完毕,并且页面更新完毕才会触发
                console.log(this.state)
                console.log(document.getElementById('c').innerText)
              }
            )
          }}
        >
          +
        </button>
      </div>
    )
  }
}
